<template>
  <div id="waiguan">
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="@/assets/images/ban1.png" alt class="bg" />
        </div>
        <div class="swiper-slide">
          <img src="@/assets/images/ban2.png" alt class="bg" />
        </div>
        <div class="swiper-slide">
          <img src="@/assets/images/ban3.png" alt class="bg" />
        </div>
      </div>
    </div>

    <div class="kj">
      <img src="@/assets/images/banitem.png" style="width: 100%" alt class="img" />
      <div class="text">人人云型号：人人云1.0</div>
    </div>
    <div class="content col-center" data-aos="fade-up">
      <div class="title">外观简约，简而不凡</div>
      <div class="detail text-center">颠覆传统矿机大笨重的形象，人人云化繁为简，结合当下最潮流的轻简主义设计，精致小巧，时尚大气。</div>
    </div>
    <div class="col-center">
      <div class="list col-center" data-aos="fade-up">
        <div class="item" v-for="i in list" :key="i.id">
          <img :src="i.icon" alt class="icon" />
          <div class="text">
            <div class="zh">{{i.zh}}</div>
            <div class="eng">{{i.eng}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        autoplay: true,
        loop: true
      },
      list: [
        {
          id: 1,
          icon: require("@/assets/images/wgico1.png"),
          zh: "主机强韧不变形",
          eng: "The main engine is strong and flexible"
        },
        {
          id: 2,
          icon: require("@/assets/images/wgico2.png"),
          zh: "阳极氧化喷绘工艺",
          eng: "Anodic oxidation spray painting process"
        },
        {
          id: 3,
          icon: require("@/assets/images/wgico3.png"),
          zh: "MINI机箱卧式",
          eng: "MINI case horizontal"
        },
        {
          id: 4,
          icon: require("@/assets/images/wgico4.png"),
          zh: "摆脱工业级矿机",
          eng: "Get rid of industrial-grade miners"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
}
.kj {
  width: 100%;
  margin: 0 auto;
  transform: translateY(-97%);
  position: relative;
  z-index: 99;
  .text {
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.list {
  display: inline-flex;
  align-items: flex-start;
}
.content {
  .title {
    width: 155px;
    height: 21px;
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 21px;
    letter-spacing: 1px;
  }
  .detail {
    width: 266px;
    height: 72px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    line-height: 18px;
    text-indent: 2em;
    margin-top: 20px;
  }
}
.item {
  display: flex;
  margin: 10px 0;
  .icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    margin-right: 4px;
  }
  .zh {
    height: 16px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
  }
  .eng {
    height: 6px;
    font-size: 5px;
    font-family: MicrosoftYaHei;
    color: rgba(153, 153, 153, 1);
    line-height: 6px;
  }
}
</style>